<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select id="province">
    </select>
    <select id="city">
    </select>
    <script>
        var provinceArr = ['湖北省', '湖南省', '广东省']
        var cityArr = [
            ['武汉市', '孝感市', '黄石市', '黄冈市', '荆州市', '仙桃市'],
            ['长沙市', '株洲市', '湘潭市', '衡阳市', '邵阳市', '岳阳市'],
            ['广州市', '韶关市', '深圳市', '珠海市', '汕头市', '佛山市']
        ]
        var province = document.querySelector('#province')
        var city = document.querySelector('#city');
        (() => {
            provinceArr.forEach((v, index) => {
                var option = document.createElement('option')
                option.innerText = v
                option.value = index
                province.appendChild(option)
            });
            cityArr[0].forEach(v => {
                var option = document.createElement('option')
                option.innerText = v
                city.appendChild(option)
            });
        })()
        province.onchange = function () {
            city.innerHTML = '';
            cityArr[this.value].forEach(v => {
                var option = document.createElement('option')
                option.innerText = v
                city.appendChild(option)
            });
        }
    </script>
</body>

</html>